import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:lib_uikit/dimen/gt_dimensions_v3.dart';
import 'package:lib_uikit/lib_uikit.dart';

class GTStepperV3 extends StatefulWidget {
  final String? hint;
  final String?text;
  final TextInputType? inputType;
  final List<TextInputFormatter>? inputFormatter;
  const GTStepperV3({
    super.key,
    this.hint,
    this.text,
    this.inputType = TextInputType.text,
    this.inputFormatter,
  });

  @override
  State<StatefulWidget> createState() => _StepperStateV3();
}

class _StepperStateV3 extends State<GTStepperV3> {
  Color strokeColor = GTColorsV3.divider5.color;
  bool hasFocus = false;

  FocusNode _focusNode = FocusNode();
  TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(_onFocusChange);
  }

  void _onFocusChange() {
    setState(() {
      hasFocus = _focusNode.hasFocus;
    });
  }

  @override
  void dispose() {
    _focusNode.dispose();
    _textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      padding: const EdgeInsets.symmetric(horizontal: 8),
      decoration: BoxDecoration(
          color: GTColorsV3.bg1.color,
          border: Border.all(
              color: hasFocus ? GTColorsV3.icon9.color : GTColorsV3.divider5.color, width: GTDimensionsV3.strokeWidth),
          borderRadius: BorderRadius.circular(6)),
      child: Row(
        children: [
          if (hasFocus) ...[
            Icon(
              GTIconFont.e912,
              color: GTColorsV3.icon3.color,
              size: 12,
            )
          ],
          Expanded(
              child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              if (hasFocus) ...[
                Text(
                  widget.hint ?? "",
                  style: gtTextStyleW400(fontSize: 10, color: GTColorsV3.text3.color),
                )
              ],
              const SizedBox(
                height: 2,
              ),
              TextField(
                focusNode: _focusNode,
                textAlign: TextAlign.center,
                cursorColor: GTColorsV3.icon5.color,
                cursorWidth: 2,
                cursorRadius: const Radius.circular(2),
                keyboardType: widget.inputType,
                inputFormatters: widget.inputFormatter,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: hasFocus ? "" : widget.hint,
                  isCollapsed: true,
                  hintStyle: gtTextStyleW500(
                    fontSize: 14,
                    color: GTColorsV3.text3.color,
                  ),
                ),
                style: gtTextStyleW500(
                  fontSize: 14,
                  color: GTColorsV3.text1.color,
                ),
              ),
            ],
          )),
          if (hasFocus) ...[
            Icon(
              GTIconFont.e913,
              color: GTColorsV3.icon3.color,
              size: 12,
            )
          ],
        ],
      ),
    );
  }
}
